'use client'

import { ReactNode, useState, useEffect } from 'react'
import { useDisclosure } from '@chakra-ui/react'
import { ProjectType, NewProjectModal } from './NewProjectModal'
import { NewChapterModal } from './NewChapterModal'
import { SettingsModal } from './SettingsModal'
import { ConfirmationModal } from './ConfirmationModal'
import { Attachment, AttachmentPreviewModal } from './AttachmentPreviewModal'

interface ModalManagerProps {
  children: ReactNode;
}

export const ModalManager = ({ children }: ModalManagerProps) => {
  // 新建项目模态框
  const {
    isOpen: isNewProjectModalOpen,
    onOpen: openNewProjectModal,
    onClose: closeNewProjectModal
  } = useDisclosure()
  
  // 新建章节模态框
  const {
    isOpen: isNewChapterModalOpen,
    onOpen: openNewChapterModal,
    onClose: closeNewChapterModal
  } = useDisclosure()
  
  // 设置模态框
  const {
    isOpen: isSettingsModalOpen,
    onOpen: openSettingsModal,
    onClose: closeSettingsModal
  } = useDisclosure()
  
  // 确认对话框
  const {
    isOpen: isConfirmationModalOpen,
    onOpen: openConfirmationModal,
    onClose: closeConfirmationModal
  } = useDisclosure()
  
  // 附件预览模态框
  const {
    isOpen: isAttachmentPreviewModalOpen,
    onOpen: openAttachmentPreviewModal,
    onClose: closeAttachmentPreviewModal
  } = useDisclosure()
  
  // 模态框参数状态
  const [projectModalParams, setProjectModalParams] = useState<{
    onCreateProject: (title: string, description: string, type: ProjectType) => void;
  }>({
    onCreateProject: () => {}
  })
  
  const [chapterModalParams, setChapterModalParams] = useState<{
    projectId: string;
    onCreateChapter: (projectId: string, title: string, order: number) => void;
    lastChapterNumber: number;
  }>({
    projectId: '',
    onCreateChapter: () => {},
    lastChapterNumber: 0
  })
  
  const [settingsModalParams, setSettingsModalParams] = useState<{
    initialSettings: any;
    onSaveSettings: (settings: any) => void;
  }>({
    initialSettings: {},
    onSaveSettings: () => {}
  })
  
  const [confirmationModalParams, setConfirmationModalParams] = useState<{
    title: string;
    message: string;
    onConfirm: () => void;
    confirmText?: string;
    cancelText?: string;
    isDangerous?: boolean;
  }>({
    title: '',
    message: '',
    onConfirm: () => {},
    confirmText: '确认',
    cancelText: '取消',
    isDangerous: false
  })
  
  const [attachmentPreviewParams, setAttachmentPreviewParams] = useState<{
    attachment: Attachment | null;
    onEdit?: (attachment: Attachment) => void;
  }>({
    attachment: null,
    onEdit: undefined
  })
  
  // 设置事件监听器
  useEffect(() => {
    const handleNewProjectModalOpen = (event: CustomEvent) => {
      setProjectModalParams(event.detail)
      openNewProjectModal()
    }
    
    const handleNewChapterModalOpen = (event: CustomEvent) => {
      setChapterModalParams(event.detail)
      openNewChapterModal()
    }
    
    const handleSettingsModalOpen = (event: CustomEvent) => {
      setSettingsModalParams(event.detail)
      openSettingsModal()
    }
    
    const handleConfirmationModalOpen = (event: CustomEvent) => {
      setConfirmationModalParams(event.detail)
      openConfirmationModal()
    }
    
    const handleAttachmentPreviewModalOpen = (event: CustomEvent) => {
      setAttachmentPreviewParams(event.detail)
      openAttachmentPreviewModal()
    }
    
    // 添加事件监听器
    window.addEventListener('open-new-project-modal', handleNewProjectModalOpen as EventListener)
    window.addEventListener('open-new-chapter-modal', handleNewChapterModalOpen as EventListener)
    window.addEventListener('open-settings-modal', handleSettingsModalOpen as EventListener)
    window.addEventListener('open-confirmation-modal', handleConfirmationModalOpen as EventListener)
    window.addEventListener('open-attachment-preview-modal', handleAttachmentPreviewModalOpen as EventListener)
    
    // 清理函数
    return () => {
      window.removeEventListener('open-new-project-modal', handleNewProjectModalOpen as EventListener)
      window.removeEventListener('open-new-chapter-modal', handleNewChapterModalOpen as EventListener)
      window.removeEventListener('open-settings-modal', handleSettingsModalOpen as EventListener)
      window.removeEventListener('open-confirmation-modal', handleConfirmationModalOpen as EventListener)
      window.removeEventListener('open-attachment-preview-modal', handleAttachmentPreviewModalOpen as EventListener)
    }
  }, [openNewProjectModal, openNewChapterModal, openSettingsModal, openConfirmationModal, openAttachmentPreviewModal])
  
  return (
    <>
      {children}
      
      {/* 各种模态框组件 */}
      <NewProjectModal 
        isOpen={isNewProjectModalOpen} 
        onClose={closeNewProjectModal}
        onCreateProject={projectModalParams.onCreateProject}
      />
      
      <NewChapterModal 
        isOpen={isNewChapterModalOpen} 
        onClose={closeNewChapterModal}
        projectId={chapterModalParams.projectId}
        onCreateChapter={chapterModalParams.onCreateChapter}
        lastChapterNumber={chapterModalParams.lastChapterNumber}
      />
      
      <SettingsModal 
        isOpen={isSettingsModalOpen} 
        onClose={closeSettingsModal}
        initialSettings={settingsModalParams.initialSettings}
        onSaveSettings={settingsModalParams.onSaveSettings}
      />
      
      <ConfirmationModal 
        isOpen={isConfirmationModalOpen} 
        onClose={closeConfirmationModal}
        title={confirmationModalParams.title}
        message={confirmationModalParams.message}
        onConfirm={confirmationModalParams.onConfirm}
        confirmText={confirmationModalParams.confirmText}
        cancelText={confirmationModalParams.cancelText}
        isDangerous={confirmationModalParams.isDangerous}
      />
      
      <AttachmentPreviewModal 
        isOpen={isAttachmentPreviewModalOpen} 
        onClose={closeAttachmentPreviewModal}
        attachment={attachmentPreviewParams.attachment}
        onEdit={attachmentPreviewParams.onEdit}
      />
    </>
  )
}
